<template>
	<view class="orderStatus">
		<view class="list">
			<uni-list :border="false">
				<uni-list-item title="订单单号" :rightText="orderStatus.orderId"></uni-list-item>
			</uni-list>
			<uni-group v-for="(item,index) in orderStatus.shopInfo" :key="index" title="商品信息" mode="card">
				<uni-list :border="false">
					<uni-list-item title="商品名称" :rightText="item.name"></uni-list-item>
					<uni-list-item title="外箱编码" :rightText="item.caseCode"></uni-list-item>
					<uni-list-item title="瓶盒编码" :rightText="item.vaseCode"></uni-list-item>
					<uni-list-item title="数量" :rightText="`${item.count}瓶`"></uni-list-item>
				</uni-list>
			</uni-group>
		</view>
		<uni-table stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="70">岗位</uni-th>
				<uni-th width="70">状态</uni-th>
				<uni-th width="70">经手人</uni-th>
				<uni-th width="70">时间</uni-th>
				<uni-th width="70">备注</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in orderStatus.statusList" :key="index">
				<uni-td>{{item.userType}}</uni-td>
				<uni-td>{{item.status}}</uni-td>
				<uni-td @tap="toContactsPage(item)">{{item.handler}}</uni-td>
				<uni-td>{{item.date}}</uni-td>
				<uni-td>
					<uni-tag type="primary" :inverted="true" text="查看" size="small" @click="toNotePage(item.remarks)">
					</uni-tag>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		name: "OrderStatus",
		data() {
			return {
				orderId: "",
				orderStatus: {}
			}
		},
		onLoad(options) {
			console.log(options)
			this.orderId = options.orderId
		},
		onShow() {
			this.getOrderStatus()
		},
		methods: {
			async getOrderStatus() {
				try {
					const {
						data
					} = await this.request("orderStatus", {
						orderId: this.orderId
					})

					this.orderStatus = data
				} catch (e) {
					console.log(e)
				}
			},
			// 跳转联系人页面
			toContactsPage(item) {
				uni.navigateTo({
					url: `/pages/contacts/contacts?handler=${JSON.stringify(item)}`
				})
			},
			// 跳转备注页
			toNotePage(remarks) {
				uni.navigateTo({
					url: `/pages/note/note?remarks=${remarks}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderStatus {
		padding: 20rpx 0 60rpx;

		.list {
			margin-bottom: 40rpx;
		}
	}
</style>
